<template>
	<div>
		<div class="disFlex p-12" style="margin-top: 40px">
			<div class="m-r-20">
				<img style="margin-left: -17px" src="../assets/img/right.png" alt="" srcset="" />
			</div>
			<div class="tit">今日会所动态</div>
		</div>
		<div class="disFlex flex-wrap">
			<div v-for="(item, index) in list" :key="index" class="active" @click="btn(item.id)">
				<div :class="[active == item.id ? 'active-border' : '', '', 'active-son']">
					{{ item.name }}
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import EventBus from './bustJson';
export default {
	data() {
		return {
			active: 101539,
			list: [
				{
					name: '深圳会所',
					id: 101539
				},
				{
					name: '北京会所',
					id: 101538
				},
				{
					name: '普陀会所', // 悦馨香分账套
					id: 1290323
				},
				{
					name: '静安会所',
					id: 101537
				},
				{
					name: '锦绣会所', //馨悦湾分账套
					id: 1183952
				},
				{
					name: '桃林会所', //浦东分账套
					id: 101536
				}
			]
		};
	},
	mounted() {
		// let i = 0;
		// const interval = setInterval(() => {
		//   i++;
		//   if (i === 6) {
		//     i = 0; // 修正此处的运算符
		//     this.btn(i);
		//   } else {
		//     this.btn(i);
		//   }
		// }, 5000);
	},
	methods: {
		btn(i) {
			this.active = i;
			EventBus.$emit('indexHsAllChanged', i);
			// this.$store.commit('smessindexHs',i)
		}
	}
};
</script>

<style scoped>
.m-r-20 {
	margin-right: 20px;
}
.flex-wrap {
	flex-wrap: wrap;
}
.disFlex {
	display: flex;
	margin: 20px;
}
.p-12 {
	padding: 0 12px;
}
.active {
	width: 25%;
	height: 30px;
	font-size: 18px;
	padding: 10px 0px;
	flex-shrink: 0;
	color: #fff;
	cursor: pointer;
}

.active-border {
	border-bottom: 4px solid #facd91;
	color: #f59a23 !important;
	font-weight: bold;
}

.active-son {
	text-align: center;
	width: 50%;
	margin: auto;
	padding: 6px 0px;
}
.tit {
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	flex-shrink: 0;
}
</style>
